<template>
  <div>

    <el-form ref="form" :model="brand" label-width="150px">
      <el-form-item label="品牌名称">
        <el-input v-model="brand.name"></el-input>
      </el-form-item>
      <el-form-item label="品牌首字母">
        <el-input v-model="brand.firstLetter"></el-input>
      </el-form-item>


      <el-form-item label="品牌LOGO">
        <el-upload
          class="upload-demo"
          action="/dev-api/file/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>



      <el-form-item label="品牌专区大图">
        <el-upload
          class="upload-demo"
          action="/dev-api/file/upload"
          :on-preview="handlePreview1"
          :on-remove="handleRemove1"
          :on-success="handleSuccess1"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>


      <el-form-item label="品牌故事">
        <el-input v-model="brand.brandStory"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="brand.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示">
<!--        showStatus-->
        <template>
          <el-radio v-model="brand.showStatus" label="1">是</el-radio>
          <el-radio v-model="brand.showStatus" label="0">否</el-radio>
        </template>
      </el-form-item>

      <el-form-item label="品牌制造商">
        <template>
<!--          factoryStatus-->
          <el-radio v-model="brand.factoryStatus" label="1">是</el-radio>
          <el-radio v-model="brand.factoryStatus" label="0">否</el-radio>
        </template>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import {add} from "@/api/product/brand";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        brand:{},
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      onSubmit(){
        add(this.brand).then(res=>{
          this.$message.success("添加成功")
          this.$router.push('/product/brand')
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleSuccess(file){
          console.log(file)
          this.brand.logo=file.data.url
      },
      handleRemove1(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview1(file) {
        console.log(file);
      },
      handleExceed1(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove1(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleSuccess1(file){
        console.log(file)
        this.brand.bigPic=file.data.url
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
